<template>
    <div>
        <div class="search_Jiangpin">
            &emsp;&emsp;搜索奖品 &emsp;<el-input class="search_jiangPin_ipt" placeholder="请输入奖品名称"></el-input> <button
                class="sousuo"><i class="el-icon-search"></i></button>
        </div>
        <div class="buttons">
            <el-button size="medium" type="primary" @click="goback()">返回无限赏列表</el-button>
            <!-- <el-button size="medium" type="primary" @click="addGoods()">添加普通奖品</el-button> -->
            <el-button size="medium" type="danger">批量删除</el-button>
        </div>
        <!-- 奖品列表 -->
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="id" label="ID">
            </el-table-column>
            <el-table-column prop="name" label="奖品名称">
                <!-- <template v-slot="scope">{{ scope.row.date }}</template> -->
            </el-table-column>
            <el-table-column prop="good_url" label="奖品图片">
                <template v-slot="scope">
                    <div class="good_display_url">
                        <img :src="scope.row.display_url">
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="level" label="赏品等级">
                <template>

                </template>
            </el-table-column>
            <el-table-column prop="ip_family" label="奖品类型">
            </el-table-column>
            <el-table-column prop="price" label="显示价格">
                <template v-slot="scope">
                    {{ scope.row.price / 100 }}
                </template>
            </el-table-column> 
            <el-table-column prop="back_price" label="回收价格">
            </el-table-column>
            <el-table-column prop="gaiLv" label="抽赏概率">
            </el-table-column>
            <el-table-column prop="cp" label="cp值">
            </el-table-column>
            <el-table-column prop="order" label="排序">
            </el-table-column>

            <el-table-column prop="sale_time" label="预售时间">
            </el-table-column>
            <!-- <el-table-column label="操作">
                <template v-slot="scope">
                    <span class="edit_btn" @click="editBox(scope.row.id)"><i class="el-icon-edit"></i>编辑</span>
                    <span class="del_btn"><i class="el-icon-delete"></i>删除</span>
                </template>
            </el-table-column> -->
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            goodsList: []
        }
    },
    created() {
        this.getPrizeList()
    },
    methods: {
        // 返回列表
        goback() {
            this.$router.push("/layout/choushangguanli/tianjiawuxianshang")
        },
     
        getPrizeList() {
            this.tableData = this.$store.state.yitianjiawuxianshangall.concat(this.$store.state.shoudongwuxianshangall)
            console.log(this.tableData)
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    },
}
</script>

<style lang="less" scoped>
.search_Jiangpin {
    font-size: 14px;
}

.search_jiangPin_ipt {
    width: 250px;
}

.sousuo {
    margin: 6px;
    width: 50px;
    height: 40px;
    background: #009688;
    border: 0;
    color: white;
    font-size: 20px;
    vertical-align: middle;
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
    cursor: pointer;
}

.buttons {
    margin-top: 20px;
}

.edit_btn,
.del_btn {
    display: inline-block;
    cursor: pointer;
    color: white;
    border-radius: 5px;
    font-size: 13px;
    padding: 3px;
    background: #ff5722;
}

.del_btn {
    margin-left: 8px;
    background: #1e9fff;
}

.good_display_url {
    width: 60px;
    height: 60px;
}

.good_display_url img {
    width: 100%;
    height: 100%;
}
</style>